export class JiNengKuang extends HTMLElement {
	kuaiJieJian = null
	mingZi = null
	xinXiKuang = null
	
	constructor() {
		super()

		let shadow = this.attachShadow({ mode: 'open' })

		let chaCao = document.createElement('slot')
		shadow.appendChild(chaCao)
		
		this.kuaiJieJian = document.createElement('span')
		this.kuaiJieJian.style = `
			font-size: 0.7rem;
			font-weight: 800;
			position: absolute;
			top: 0.1rem;
			right: 0.1rem;
		`
		let kjj = this.getAttribute('kuai-jie-jian')
		if (kjj) this.kuaiJieJian.textContent = kjj
		shadow.appendChild(this.kuaiJieJian)
		
		this.mingZi = document.createElement('span')
		this.mingZi.style = `
			font-size: 0.8rem;
			text-align: center;
			color: #def;
		`
		let mz = this.getAttribute('ming-zi')
		if (mz) this.kuaiJieJian.textContent = mz
		shadow.appendChild(this.mingZi)
		// 信息框
		this.xinXiKuang = document.createElement('xin-xi-kuang')
		this.xinXiKuang.chuFaYuanSu = this
	}

	connectedCallback() {
		this.style = `
			${this.style.cssText}
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 3.6rem;
			height: 3.6rem;
			margin: 0.1rem;
			padding: 0.5rem;
			border-radius: 0.5rem;
			background-color: rgba(255, 255, 255, 0.5);
			box-shadow: 0px 0px 10px 5px rgba(63, 127, 255, 0.2);
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
		`
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name == 'kuai-jie-jian') this.kuaiJieJian.textContent = newValue
		if (name == 'ming-zi') this.mingZi.textContent = newValue
		if (name == 'xiang-qing') this.xinXiKuang.wenBen.textContent = newValue
	}

	static get observedAttributes() {
		return ['kuai-jie-jian', 'ming-zi', 'xiang-qing'];
	}
}

customElements.define("ji-neng-kuang", JiNengKuang)


